<template>
  <el-main>
    <!--    导航栏-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="elmenu=true">退租物业交割单</el-menu-item>
      <el-menu-item index="2" :disabled="elmenu">解约协议</el-menu-item>
    </el-menu>
    <!--   导航栏 结束 -->
    <br/>
    <br/>
    <el-form v-show="activeIndex=='1'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-col :span="24">
        <el-form-item label-width="130px" label="收房合同号" prop="sfContractId">
          <el-col :span="12">
            <el-input v-model="ruleForm.sfContractId" disabled :style="{width: '70%'}"></el-input>
          </el-col>
          <el-button type="warning" @click="sdQeury">收房合同查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="收房合同编号" prop="sfContractNo" label-width="130px">
          <el-input v-model="ruleForm.sfContractNo" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房产信息" prop="houseName" label-width="130px">
          <el-input v-model="ruleForm.houseName" disabled :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="产权地址" prop="cqAddress" label-width="130px">
            <el-input v-model="ruleForm.cqAddress" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产证书编号" prop="houseZsNo" label-width="130px">
            <el-input v-model="ruleForm.houseZsNo" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="业主姓名" prop="ownerName" label-width="130px">
            <el-input v-model="ruleForm.ownerName" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业主联系方式" prop="ownerMobile" label-width="130px">
            <el-input v-model="ruleForm.ownerMobile" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="签约人姓名" prop="signUserName" label-width="130px">
            <el-input v-model="ruleForm.signUserName" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约人电话" prop="signUserMobile" label-width="130px">
            <el-input v-model="ruleForm.signUserMobile" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="12">
        <el-form-item label="物业交割日期" prop="wyjgDate" label-width="130px">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="ruleForm.wyjgDate"
            type="date"
            placeholder="选择日期" :style="{width: '80%'}">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解约类型" prop="terminationType" label-width="130px">
          <el-select v-model="ruleForm.terminationType" placeholder="请选择解约类型" :style="{width: '80%'}">
            <el-option label="合同到期" :value="1"></el-option>
            <el-option label="业主提前解约" :value="2"></el-option>
            <el-option label="我方退租解约" :value="3"></el-option>
            <el-option label="其他" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark" label-width="130px">
          <el-input type="textarea" size="200" v-model="ruleForm.remark" :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <br/>
      <br/>
      <el-col :span="24">
        <div class="c_shouldBack">应退
          <br>
          <el-table
            :data="paymentData">
            <el-table-column
              label="类型">
              <template slot-scope="scope">
                {{scope.row.itemType=='1'?'水费':scope.row.itemType=='2'?'电费':scope.row.itemType=='3'?'煤/燃气费':scope.row.itemType=='80'?'租金':scope.row.itemType=='81'?'押金':scope.row.itemType=='90'?'解约结算':'其它'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="金额">
            </el-table-column>
            <el-table-column
              label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="warning" @click="del(scope.row.id)" class="el-icon-delete" plain></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="24">
        <div class="c_shouldBack">应收
          <br>
          <el-table
            :data="paymentData2">
            <el-table-column
              label="类型">
              <template slot-scope="scope">
                {{scope.row.itemType=='1'?'水费':scope.row.itemType=='2'?'电费':scope.row.itemType=='3'?'煤/燃气费':scope.row.itemType=='80'?'租金':scope.row.itemType=='81'?'押金':scope.row.itemType=='90'?'解约结算':scope.row.itemType=='100'?'押金':'其它'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="金额">
            </el-table-column>
            <el-table-column
              label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="warning" @click="del(scope.row.id)" class="el-icon-delete" plain></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24">
        <div style="width: 1200px">
          <el-form-item>
            <br><br>
            <div style="float: right" >合计(
              <span style="color: orange">应退</span>)=:{{this.totalmoney}}元
            </div>
            <br/>
            <el-button type="primary" @click="submitForm('ruleForm')" style="float: right">&emsp;&emsp;下一步</el-button>
            <el-button @click="resetForm('ruleForm')" style="float: right">取消</el-button>
          </el-form-item>
        </div>
      </el-col>
    </el-form>


    <!--    收房合同查询-->
    <el-dialog title="收房合同查询" :visible.sync="open">
      <el-form :inline="true" :model="queryData" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="queryData.premiseName"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="queryData.ownerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="sdQeury">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData">
        <el-table-column property="ownerName" label="业主姓名"></el-table-column>
        <el-table-column property="houseName" label="房产信息"></el-table-column>
        <el-table-column property="conSignTime" label="签约日期">
          <template slot-scope="scope">
            <span v-if="scope.row.conSignTime!= null">
              {{ parseTime(scope.row.conSignTime, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="IsOn(scope.row.id)" plain>选中</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryData.pageNum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="this.queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </el-dialog>


    <!--    解约协议-->
    <!--    合同附件-->
    <div v-show="activeIndex == '2'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>解约合同</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove3">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>物业交割单</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload2"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove2">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>其他</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload3"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove1">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <div>
        <el-button type="primary" @click="add" style="float: right">保存</el-button>
        <el-button type="warning" @click="activeIndex = '1',elmenu = true">上一步</el-button>
      </div>
    </div>
  </el-main>
</template>

<script>
  import {terminationList, terminationIsOn, addTermination} from "@/api/renting/termination";


  export default {
    name: "Termination",
    data() {
      return{
        //应退总价
        totalmoney: undefined,
        //应退
        paymentData: [],
        //应收
        paymentData2:[
          {
            itemType: '100',
            paymentAmount: undefined
          }
        ],
        //收房查询开关
        open:false,
        //收房数据
        tableData: [],
        queryID:{
          sfContractId: undefined
        },
        queryData:{
          pageNum : 1,
          pageSize : 10,
          ownerName: undefined,
          houseName: undefined,
          conSignTime: undefined
        },
        total: undefined,
        /*列表*/
        ruleForm: {
          sfContractId:undefined,
          sfContractNo:undefined,
          houseName:undefined,
          cqAddress:undefined,
          houseZsNo:undefined,
          ownerName:undefined,
          ownerMobile:undefined,
          signUserName:undefined,
          signUserMobile: undefined,
          wyjgDate: undefined,
          terminationType:undefined,
          remark: undefined,
          contractPhotos: [],
          propertyDeliverys: [],
          otherPhotos: [],
        },
        /*导航*/
        elmenu: true,
        activeIndex: '1',
        rules: {
          sfContractId: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          sfContractNo: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          houseName: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          cqAddress: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          houseZsNo: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          ownerName: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          ownerMobile: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          signUserName: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          signUserMobile: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          remark: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          wyjgDate: [
            { required: true, message: '不可为空', trigger: 'blur' },
          ],
          terminationType: [
            { required: true, message: '至少选择一条', trigger: 'blur' },
          ]
        }
      }
    },
    methods :{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.activeIndex = '2';
            this.elmenu = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //收房合同查询
      sdQeury() {
        this.open = true;
        terminationList(this.queryData).then(res=>{
          console.log("查询合同信息:", res);
          this.tableData = res.rows;
          this.total = res.total;
        })
      },
      //分页
      handleSizeChange(pageSize) {
        console.log(`每页 ${pageSize} 条`);
        this.queryData.pageSize = pageSize;
        this.queryData.pageNum = 1;
        this.sdQeury();
      },
      handleCurrentChange(pageNum) {
        console.log(`当前页: ${pageNum}`);
        this.queryData.pageNum = pageNum;
        this.sdQeury();
      },
      //选中
      IsOn(id) {
        this.open = false;
        console.log("选中ID:", id);
        this.queryID.sfContractId = id;
        terminationIsOn(this.queryID).then(res=>{
          console.log("选中数据:", res);
          this.paymentData=[];
          this.paymentData2=[{
            itemType: '100',
            paymentAmount: undefined
          }];
          this.ruleForm.sfContractId = res.data.id;
          this.ruleForm.sfContractNo = res.data.sfContractNo;
          this.ruleForm.cqAddress = res.data.cqAddress;
          this.ruleForm.houseName = res.data.houseName;
          this.ruleForm.houseZsNo = res.data.houseZsNo;
          this.ruleForm.ownerName = res.data.ownerName;
          this.ruleForm.ownerMobile = res.data.ownerMobile;
          this.ruleForm.signUserMobile = res.data.signUserMobile;
          this.ruleForm.signUserName = res.data.signUserName;
          this.ruleForm.remark = res.data.remark;

          var count;
          //应退    已付款的
          for (const re of res.data.paymentList) {
            if (re.payState == 2) {
              if (re.itemType) {
                if (this.paymentData.length != 0) {
                  count=0;
                  for (const p of this.paymentData) {
                    if (p.itemType == re.itemType) {
                      count++;
                      p.paymentAmount += re.paymentAmount;
                      break;
                    }
                  }
                  if (count == 0) {
                    this.paymentData.push(re);
                  }
                }else {
                  this.paymentData.push(re);
                }
              }
            }
          }
          //押金
          this.paymentData2[0].paymentAmount = res.data.depositMoney;
          //应收    未付款的
          for (const re of res.data.paymentList) {
            if (re.payState == 1) {
              if (re.itemType) {
                if (this.paymentData2.length != 0) {
                  count=0;
                  for (const p of this.paymentData2) {
                    if (p.itemType == re.itemType) {
                      count++;
                      p.paymentAmount += re.paymentAmount;
                      break;
                    }
                  }
                  if (count == 0) {
                    this.paymentData2.push(re);
                  }
                }else {
                  this.paymentData2.push(re);
                }
              }
            }
          }


          //应退总价计算
          var num1 = 0.00;
          var num2 = 0.00;
          if (this.paymentData.length != 0) {
            for (const p1 of this.paymentData) {
              num1 += p1.paymentAmount;
            }
          }
          if (this.paymentData2.length != 0) {
            for (const p2 of this.paymentData2) {
              num2 += p2.paymentAmount;
            }
          }

          //结算合计，为正应收， 为负数的时候是应退
          this.totalmoney = num1 - num2;
        })
      },

      //附件处理
      // 覆盖默认的上传行为
      requestUpload1(fileObj) {
        var formData = new FormData()
        formData.append('file', fileObj.file)
        upload(formData, fileObj).then(res => {
          console.log("图片上传", res, fileObj)
          fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
          this.ruleForm.contractPhotos.push(res.imgUrl)
        })
      },
      // 覆盖默认的上传行为
      requestUpload2(fileObj) {
        var formData = new FormData()
        formData.append('file', fileObj.file)
        upload(formData, fileObj).then(res => {
          console.log("图片上传", res, fileObj )
          fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
          this.ruleForm.propertyDeliverys.push(res.imgUrl)
        })
      },
      // 覆盖默认的上传行为
      requestUpload3(fileObj) {
        var formData = new FormData()
        formData.append('file', fileObj.file)
        upload(formData, fileObj).then(res => {
          console.log("图片上传", res, fileObj)
          fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
          this.ruleForm.otherPhotos.push(res.imgUrl)
        })
      },
      //上传之前
      beforeAvatarUpload(file) {
        console.log(file)
        const isLt1M = file.size / 1024 / 1024 < 10;
        if (!isLt1M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isLt1M;
      },
      //图片预览
      handlePictureCardPreview(file) {
        console.log("handlePictureCardPreview", file)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //图片附件上传.删除
      handleRemove1(file, fileList) {
        console.log("上传.删除")
        console.log(file, fileList);
        //删除
        this.ruleForm.otherPhotos.some((pic, i) => {
          if (pic == file.response) {
            this.ruleForm.otherPhotos.splice(i, 1)
            return true;
          }
        })
      },
      handleRemove2(file, fileList) {
        console.log("上传.删除")
        console.log(file, fileList);
        //删除
        this.ruleForm.propertyDeliverys.some((pic, i) => {
          if (pic == file.response) {
            this.ruleForm.propertyDeliverys.splice(i, 1)
            return true;
          }
        })
      },
      handleRemove3(file, fileList) {
        console.log("上传.删除")
        console.log(file, fileList);
        //删除
        this.ruleForm.contractPhotos.some((pic, i) => {
          if (pic == file.response) {
            this.ruleForm.contractPhotos.splice(i, 1)
            return true;
          }
        })
      },
      //保存解约信息
      add() {
        console.log("保存解约信息:", this.ruleForm);
        addTermination(this.ruleForm).then(res=>{
          console.log("保存成功");
          this.ruleForm.sfContractId=undefined;
          this.ruleForm.sfContractNo=undefined;
          this.ruleForm.houseName=undefined;
          this.ruleForm.cqAddress=undefined;
          this.ruleForm.houseZsNo=undefined;
          this.ruleForm.ownerName=undefined;
          this.ruleForm.ownerMobile=undefined;
          this.ruleForm.signUserName=undefined;
          this.ruleForm.signUserMobile= undefined;
          this.ruleForm.wyjgDate=undefined;
          this.ruleForm.terminationType=undefined;
          this.ruleForm.remark=undefined;
          this.ruleForm.contractPhotos= [];
          this.ruleForm.propertyDeliverys= [];
          this.ruleForm.otherPhotos= [];
          this.activeIndex = '1';
          this.$router.push("/contract/cancellist");
        })
      },
    },
    created() {

    }
  }
</script>

<style scoped>
  .c_shouldBack{
    width: 1200px;
    border:solid 1px #ddd;
    margin-left: 48px;
    border-bottom: none;
    margin-bottom: -10px;
    border-top: solid 5px #ffa800;
    padding: 7px 0px;
    text-indent: 5px;
    margin-top: 40px;
  }

</style>
